<template>
  <div class="goods_wrapper">
    <div class="menu-wrapper" ref="menu">
      <ul ref="menu_children">
        <li class="menu-item" v-for="(item,i) in goodsList" :key="i" :class="{'current': currentIndex === i}"
            @click="selectedMenu(i)">
          <span class="text"><i class="icon" :class="classMap[item.type]" v-if="item.type!= -1"></i>{{item.name}}</span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="foods">
      <div class="foods-div" ref="foods_children" v-if="goodsList">
        <div class="food-list-hook" v-for="(item,i) in goodsList" :key="i">
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li class="foods-item clearfix" v-for="foodItem in item.foods" @click="lookInfo(foodItem)" :key="foodItem.id">
              <img :src="foodItem.image" alt="">
              <div class="info">
                <p class="foods-til">{{foodItem.name}}</p>
                <p class="foods-desc">{{foodItem.description}}</p>
                <p class="foods-xsl"><span>月售{{foodItem.sellCount}}</span><span
                  class="rating">好评率:{{foodItem.rating}}%</span></p>
                <v-fcount class="foods-count" :foodsinfo="foodItem" @cart-add="cartAdd"></v-fcount>
                <p class="foods-price">
                  <span class="now"><span class="money">￥</span><span class="now-price">{{foodItem.price}}</span></span>
                  <span class="old" v-if="foodItem.oldPrice"><span class="money">￥</span><span class="old-price">{{foodItem.oldPrice}}</span></span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <v-shopcart :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice" v-if="seller.minPrice" ref="shopcart" id="shopcart"></v-shopcart>
    <v-food :food="foodInfo" ref="food" @foodAddCart="cartAdd"></v-food>
  </div>

</template>

<script>
  import BScroll from 'better-scroll'
  import Shopcart from '../shopcart/Shopcart'
  import FoodCounter from '../foodCounter/FoodCounter'
  import Food from '../food/Food'
  export default {
    name: "Goods",
    components:{
      'v-shopcart':Shopcart,
      'v-fcount': FoodCounter,
      'v-food': Food
    },
    props:{
      seller:{
        type: Object
      }
    },
    data() {
      return {
        goodsList: [],
        scrollY: 0,
        foodsList: [],
        foodsListHeight: [],
        foodInfo: {}
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      this.getData();
    },
    computed: {
      currentIndex() {
        for (let i = 0; i < this.foodsListHeight.length; i++) {
          let height1 = this.foodsListHeight[i];
          let height2 = this.foodsListHeight[i + 1];
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            return i;
          }
        }
        return 0;
      }
    },
    methods: {
      cartAdd(el){
        this.$nextTick(() => {
          this.$refs.shopcart.drop(el);
        });
      },
      getData() {
        this.$http.get('api/goods').then(result => {
          if (result.body.status === 0) {
            this.goodsList = result.body.message;
            this.$nextTick(() => {
              this._initScroll();
              this._calculateHeight();
            })
          }
        })
      },
      _initScroll() {
        this.menuScroll = new BScroll(this.$refs.menu, {
          click: true,
          probeType: 3
        });
        this.foodsScroll = new BScroll(this.$refs.foods, {
          click: true,
          probeType: 3
        });
        let menu_Wrapper_Height = this.$refs.menu.clientHeight;
        let menu_Children_Height = this.$refs.menu_children.clientHeight;
        let foods_Wrapper_Height = this.$refs.foods.clientHeight;
        let foods_Children_Height = this.$refs.foods_children.clientHeight;
        this.foodsScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y));
          if(menu_Children_Height > menu_Wrapper_Height){
            //左边随右边滚动而等比滚动
            let menuY = this.scrollY * (menu_Children_Height - menu_Wrapper_Height) / (foods_Wrapper_Height - foods_Children_Height);
            this.menuScroll.scrollTo(0, menuY);
          }
        })
      },
      _calculateHeight() {
        let foodsList = this.$refs.foods.getElementsByClassName('food-list-hook');
        let height = 0;
        this.foodsListHeight.push(height);
        for (let i = 0; i < foodsList.length; i++) {
          height += foodsList[i].clientHeight;
          this.foodsListHeight.push(height);
        }
      },
      selectedMenu(i) {
        let foodsList = this.$refs.foods.getElementsByClassName('food-list-hook');
        this.scrollY = this.foodsListHeight[i];
        this.foodsScroll.scrollToElement(foodsList[i], 300);
      },
      lookInfo(info){
        this.foodInfo = info;
        this.$refs.food.show();
      }
    },
  }
</script>

<style lang="scss" scoped>
  .goods_wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 174px;
    bottom: 0;
    padding-bottom: 48px;
    overflow: hidden;
    .menu-wrapper {
      width: 80px;
      flex: 0 0 80px;
      height: 100%;
      font-weight: 200;
      color: rgb(7, 17, 27);
      line-height: 14px;
      background-color: #f3f5f7;
      overflow: hidden;
      .menu-item {
        height: 54px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        box-sizing: border-box;
        @include border-1px(rgba(7, 17, 27, .1));
        &.current {
          background-color: #fff;
          font-weight: 700;
          @include border-none();
        }
      }
      .icon {
        width: 12px;
        height: 12px;
        background-size: 12px 12px;
        background-repeat: no-repeat;
        margin-right: 2px;
        vertical-align: middle;
        display: inline-block;
        line-height: 14px;
      }
      .text {
        font-size: 12px;
        vertical-align: middle;
      }
    }
    .foods-wrapper {
      flex: 1;
      background-color: #fff;
      height: 100%;
      line-height: 14px;
      overflow: hidden;
      .foods-div {
        .title {
          height: 26px;
          font-size: 12px;
          line-height: 26px;
          color: rgb(147, 153, 159);
          background-color: #f3f5f7;
          padding-left: 14px;
          border-left: 2px solid #d9dde1;
        }
        ul {
          li.foods-item {
            margin: 18px;
            border-bottom: 1px solid rgba(7, 17, 27, .1);
            display: flex;
            &:last-child {
              border: none;
            }
            img {
              width: 57px;
              height: 43px;
            }
            .info {
              margin-left: 10px;
              .foods-til {
                font-size: 14px;
                color: rgb(7, 17, 27);
                line-height: 14px;
              }
              .foods-desc,
              .foods-xsl {
                margin-top: 8px;
                font-size: 10px;
                color: rgb(147, 153, 159);
                line-height: 10px;
              }
              .foods-xsl {
                .rating {
                  margin-left: 12px;
                }
              }
              .foods-count{
                position: absolute;
                right: 18px;
              }
              .foods-price {
                font-size: 0;
                line-height: 24px;
                margin-top: 8px;
                .now {
                  color: rgb(240, 20, 20);
                  .money {
                    font-size: 10px;
                    font-weight: normal;
                  }
                  .now-price {
                    font-size: 14px;
                    font-weight: 700;
                  }
                }
                .old {
                  margin-left: 8px;
                  font-size: 10px;
                  color: rgb(147, 153, 159);
                  text-decoration: line-through;
                  .money {
                    font-weight: normal;
                  }
                  .old-price {
                    font-weight: 700;
                  }
                }

              }
            }

          }
        }
      }
    }
  }

  .icon {
    &.decrease {
      @include bg-image("decrease_3");
    }
    &.discount {
      @include bg-image("discount_3");
    }
    &.guarantee {
      @include bg-image("guarantee_3");
    }
    &.invoice {
      @include bg-image("invoice_3")
    }
    &.special {
      @include bg-image("special_3");
    }
  }
</style>
